<!--
 * @Author: hyman
 * @Date: 2021-12-31 08:55:39
 * @LastEditors: hyman
 * @LastEditTime: 2021-12-31 10:46:49
 * @Description: 请填写简介

-->
<template>
    <!-- 导航 -->
    <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="back"></van-nav-bar>

    <van-tabs v-model:active="active" @change="changeTabs">
        <van-tab v-for="item in statuslist" :title="item.title" :key="item.id">
            <van-card v-for="(order, index) in orderlist" :key="index" :price="order.total"
                :desc="'商品名称：' + order.product.name" :title="'订单号：' + order.code" :thumb="order.product.cover_cdn">
                <template #tags>
                    <p>下单时间：{{ order.createtime }}</p>
                </template>
                <template #num>
                    <van-tag plain type="danger">{{ order.status_text }}</van-tag>
                </template>
                <template #footer>
                    <van-button size="mini" :data-orderid="order.id" @click="ToInfo(order.id)">订单详情</van-button>

                    <van-button type="danger" v-if="order.status < 4 && order.status > 0" size="mini" @click="retreat(order.id)">申请退货
                    </van-button>

                    <van-button type="success" v-if="order.status == 2" size="mini" @click="confirm(order.id)">确认收货</van-button>

                    <van-button type="warning" v-if="order.status == 3" size="mini" @click="ToRate(order.id)">待评价</van-button>

                    <van-button type="primary" v-if="order.status >= 2" size="mini" @click="ToExpress(order.id)">查看物流</van-button>

                    <van-button type="warning" v-if="order.status > 3" size="mini" :data-orderid="order.id"
                        @click="ToEvaluation(order.id)">评价详情</van-button>
                </template>
            </van-card>
        </van-tab>
    </van-tabs>
</template>
<script>
export default {
    emits: ['toggle'],
    created() {
        this.$emit('toggle', false)

        this.orderData()
    },
    data() {
        return {
            active: 0,
            statuslist: [
                {
                    id: 0,
                    title: '全部'
                },
                {
                    id: 1,
                    title: '待发货'
                },
                {
                    id: 2,
                    title: '待收货'
                },
                {
                    id: 3,
                    title: '待评价'
                },
                {
                    id: 4,
                    title: '已评价'
                },
                {
                    id: -1,
                    title: '已退货'
                },
                {
                    id: -2,
                    title: '退货中'
                }

            ],
            LoginUser: this.$cookies.get('LoginUser'),
            orderlist: [],
            status: 0,
            productInfo: {}
        }
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        async orderData() {
            var data = {
                userid: this.LoginUser.id,
                status: this.status
            }

            var result = await this.$api.orderIndex(data)


            if (result.code == 0) {
                //购物车数据请求失败
                this.$notify({
                    message: result.msg,
                    duration: 1000,
                })
            }

            this.orderlist = result.data
        },
        async changeTabs(name) {
            if (name == 5) {
                this.status = -1
            } else if (name == 6) {
                this.status = -2
            } else {
                this.status = name
            }

            this.orderData()
        },
        ToInfo(id) {
            this.$router.push({
                path: '/user/order/info', query: { orderid: id }
            })
        },
        ToRate(id) {
            this.$router.push({
                path: '/user/order/rate', query: { orderid: id }
            })
        },
        ToEvaluation(id) {
            this.$router.push({
                path: '/user/order/evaluation', query: { orderid: id }
            })
        },
        ToExpress(id) {
            this.$router.push({
                path: '/user/order/express', query: { orderid: id }
            })
        },
        confirm(id) {
            this.$dialog.confirm({
                title: '确认收货',
                message:
                    '是否确认确认收货',
            })
                .then(async () => {
                    let data = {
                        orderid: id,
                        userid: this.LoginUser.id
                    }
                    let result = await this.$api.orderReceiving(data)
                    if (result.code == 1) {
                        this.$notify({
                            type: 'success',
                            message: result.msg,
                            duration: 1000,
                            onClose: () => {
                                this.orderData()
                            }
                        })
                    } else {
                        this.$notify({
                            message: result.msg,
                            duration: 1000,
                        })
                    }
                })
        },
        retreat(id) {
            this.$dialog.confirm({
                title: '退货',
                message:
                    '是否确认确认退货',
            })
                .then(async () => {
                    let data = {
                        orderid: id,
                        userid: this.LoginUser.id
                    }
                    let result = await this.$api.orderRetreat(data)
                    if (result.code == 1) {
                        this.$notify({
                            type: 'success',
                            message: result.msg,
                            duration: 1000,
                            onClose: () => {
                                this.orderData()
                            }
                        })
                    } else {
                        this.$notify({
                            message: result.msg,
                            duration: 1000,
                        })
                    }
                })
        }
    }
}
</script>